<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="/assets/css/layui.css">
    <link rel="stylesheet" href="/assets/css/view.css"/>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
    <title></title>
</head>
<body class="layui-view-body">
    <div class="layui-content">
        <div class="layui-row layui-col-space20">
            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body chart-card">
                        <div class="chart-header">
                            <div class="metawrap">
                                <div class="meta">
                                    <span>总用户数</span>
                                </div>
                                <div th:text="${statistics.get('userCount')}" class="total">126,560</div>
                            </div>
                        </div>
                        <div class="chart-body">
                            <div class="contentwrap">
                                <div  class="layui-progress">
                                    <div class="layui-progress-bar" th:lay-percent="${statistics.get('userCount')*10}+'%'"></div>
                                </div>
                            </div>
                        </div>
                        <div class="chart-footer">
                            <div class="field">
                                <span>日注册量</span>
                                <span>321</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body chart-card">
                        <div class="chart-header">
                            <div class="metawrap">
                                <div class="meta">
                                    <span>类名总数</span>
                                </div>
                                <div th:text="${statistics.get('categoryCount')}" class="total">126,560</div>
                            </div>
                        </div>
                        <div class="chart-body">
                            <div class="contentwrap">
                                <div  class="layui-progress">
                                    <div class="layui-progress-bar" th:lay-percent="${statistics.get('categoryCount')*10}+'%'"></div>
                                </div>
                            </div>
                        </div>
                        <div class="chart-footer">
                            <div class="field">
                                <span>日注册量</span>
                                <span>321</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body chart-card">
                        <div class="chart-header">
                            <div class="metawrap">
                                <div class="meta">
                                    <span>商品总数</span>
                                </div>
                                <div class="total">126,560</div>
                            </div>
                        </div>
                        <div class="chart-body">
                            <div class="contentwrap">
                                <div  class="layui-progress">
                                    <div class="layui-progress-bar" th:lay-percent="${statistics.get('userCount')*10}+'%'"></div>
                                </div>
                            </div>
                        </div>
                        <div class="chart-footer">
                            <div class="field">
                                <span>日注册量</span>
                                <span>321</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm6 layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body chart-card">
                        <div class="chart-header">
                            <div class="metawrap">
                                <div class="meta">
                                    <span>订单总数</span>
                                </div>
                                <div class="total">126,560</div>
                            </div>
                        </div>
                        <div class="chart-body">
                            <div class="contentwrap">
                                <div  class="layui-progress">
                                    <div class="layui-progress-bar" th:lay-percent="${statistics.get('userCount')*40}+'%'"></div>
                                </div>
                            </div>
                        </div>
                        <div class="chart-footer">
                            <div class="field">
                                <span>日注册量</span>
                                <span>321</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md12">
                <div class="layui-card">
                    <div class="layui-tab layui-tab-brief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">新增数</li>
                            <li>活跃度</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                dddd
                            </div>
                            <div class="layui-tab-item">
                                ddd
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-body chart-card">

                        <div class="chart-body">
                            <div id="main" style="width: 600px;height:400px;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-body chart-card">

                        <div class="chart-body">
                            <div id="bin" style="width: 600px;height:400px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/assets/layui.all.js"></script>
    <script>
     var element = layui.element;
     var chartDom = document.getElementById('main');
     var myChart = echarts.init(document.getElementById('main'));
     var option;

     option = {
         title: {
             text: '商品订单',
             subtext: '纯属虚构'
         },
         xAxis: {
             type: 'category',
             data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
         },
         yAxis: {
             type: 'value'
         },
         series: [{
             data: [150, 230, 224, 218, 135, 147, 260],
             type: 'line'
         }]
     };

     option && myChart.setOption(option);

     var binchartDom = document.getElementById('bin');
     var Chart = echarts.init(binchartDom);
     var option;

     option = {
         title: {
             text: '店铺分类',
             subtext: '纯属虚构',
             left: 'center'
         },
         tooltip: {
             trigger: 'item'
         },
         legend: {
             orient: 'vertical',
             left: 'left',
         },
         series: [
             {
                 name: '访问来源',
                 type: 'pie',
                 radius: '50%',
                 data: [
                     {value: 1048, name: '搜索引擎'},
                     {value: 735, name: '直接访问'},
                     {value: 580, name: '邮件营销'},
                     {value: 484, name: '联盟广告'},
                     {value: 300, name: '视频广告'}
                 ],
                 emphasis: {
                     itemStyle: {
                         shadowBlur: 10,
                         shadowOffsetX: 0,
                         shadowColor: 'rgba(0, 0, 0, 0.5)'
                     }
                 }
             }
         ]
     };

     option && Chart.setOption(option);

    </script>
</body>
</html>